import { useState, useCallback } from 'react';

import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import InputAdornment from '@mui/material/InputAdornment';
import IconButton from '@mui/material/IconButton';

import { DashboardContent } from 'src/layouts/dashboard';
import { Iconify } from 'src/components/iconify';

// ----------------------------------------------------------------------

/**
 * 会社情報登録ページ
 */
const CompanyAddPage = () => {
    // 基本情報
    const [companyCode, setCompanyCode] = useState('');
    const [companyName, setCompanyName] = useState('');
    const [companyNameKana, setCompanyNameKana] = useState('');
    const [officialName, setOfficialName] = useState('');
    const [capital, setCapital] = useState('');
    const [establishedYear, setEstablishedYear] = useState('');
    const [employeeCount, setEmployeeCount] = useState('');
    const [revenue, setRevenue] = useState('');
    const [category, setCategory] = useState('');
    const [mainPhone, setMainPhone] = useState('');
    const [postalCode, setPostalCode] = useState('');
    const [address, setAddress] = useState('');
    const [representative, setRepresentative] = useState('');
    const [averageAge, setAverageAge] = useState('');
    const [stockListed, setStockListed] = useState('');
    const [foreignOwnership, setForeignOwnership] = useState('');
    const [url, setUrl] = useState('');
    const [assignedDepartment, setAssignedDepartment] = useState('');
    const [assignedPerson, setAssignedPerson] = useState('');
    const [memo, setMemo] = useState('');
    const [status, setStatus] = useState('アクティブ');
    const [registrationDate] = useState(new Date().toISOString().slice(0, 16).replace('T', ' '));

    // 詳細情報
    const [businessOverview, setBusinessOverview] = useState('');
    const [organizationStructure, setOrganizationStructure] = useState('');
    const [selectionProcess, setSelectionProcess] = useState('');
    const [pastAdoptionStatus, setPastAdoptionStatus] = useState('');
    const [interviewPreference, setInterviewPreference] = useState('');
    const [companySales, setCompanySales] = useState('');
    const [futureDevelopment, setFutureDevelopment] = useState('');
    const [merger, setMerger] = useState('');
    const [contractConditions, setContractConditions] = useState('');
    const [workplaceEnvironment, setWorkplaceEnvironment] = useState('');
    const [shareholders, setShareholders] = useState('');
    const [relatedCompanies, setRelatedCompanies] = useState('');
    const [otherBusinessLocations, setOtherBusinessLocations] = useState('');
    const [transactionBank, setTransactionBank] = useState('');
    const [materialRate, setMaterialRate] = useState('');

    // 自由項目
    const [customFields, setCustomFields] = useState<Array<{ key: string; value: string }>>([]);

    const handleSubmit = useCallback(() => {
        console.log('登録実行');
        // TODO: 登録処理を実装
    }, []);

    const handleReset = useCallback(() => {
        setCompanyCode('');
        setCompanyName('');
        setCompanyNameKana('');
        setOfficialName('');
        setCapital('');
        setEstablishedYear('');
        setEmployeeCount('');
        setRevenue('');
        setCategory('');
        setMainPhone('');
        setPostalCode('');
        setAddress('');
        setRepresentative('');
        setAverageAge('');
        setStockListed('');
        setForeignOwnership('');
        setUrl('');
        setAssignedDepartment('');
        setAssignedPerson('');
        setMemo('');
        setStatus('アクティブ');
        setBusinessOverview('');
        setOrganizationStructure('');
        setSelectionProcess('');
        setPastAdoptionStatus('');
        setInterviewPreference('');
        setCompanySales('');
        setFutureDevelopment('');
        setMerger('');
        setContractConditions('');
        setWorkplaceEnvironment('');
        setShareholders('');
        setRelatedCompanies('');
        setOtherBusinessLocations('');
        setTransactionBank('');
        setMaterialRate('');
        setCustomFields([]);
    }, []);

    const renderFormRow = (label: string, children: React.ReactNode, alignItems: 'center' | 'flex-start' = 'center') => (
        <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
            <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems, borderRight: '1px solid', borderColor: 'divider' }}>
                <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                    {label}
                </Typography>
            </Box>
            <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems, gap: 1.5 }}>
                {children}
            </Box>
        </Box>
    );

    const renderTwoColumnRow = (
        label1: string,
        children1: React.ReactNode,
        label2: string,
        children2: React.ReactNode,
        alignItems: 'center' | 'flex-start' = 'center'
    ) => (
        <Box sx={{ display: 'flex', borderBottom: '1px solid', borderColor: 'divider' }}>
            <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems, borderRight: '1px solid', borderColor: 'divider' }}>
                <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                    {label1}
                </Typography>
            </Box>
            <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems, gap: 1.5, borderRight: '1px solid', borderColor: 'divider' }}>
                {children1}
            </Box>
            <Box sx={{ width: 160, bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, display: 'flex', alignItems, borderRight: '1px solid', borderColor: 'divider' }}>
                <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                    {label2}
                </Typography>
            </Box>
            <Box sx={{ flex: 1, px: 1.5, py: 0.75, display: 'flex', alignItems, gap: 1.5 }}>
                {children2}
            </Box>
        </Box>
    );

    return (
        <DashboardContent maxWidth="xl">
            {/* ヘッダー */}
            <Box>
                <Box display="flex" alignItems="center" gap={2} sx={{ mb: 2 }}>
                    <div style={{ height: 25, width: 5, backgroundColor: '#0543A5', borderRadius: 3 }}></div>
                    <Typography variant="h4" sx={{ fontWeight: 700 }}>
                        会社情報登録
                    </Typography>
                </Box>
                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                    項目の並び替えは<Typography component="span" sx={{ color: 'primary.main', cursor: 'pointer' }}>こちら</Typography>
                </Typography>
            </Box>

            {/* 基本情報セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        基本情報
                    </Typography>
                </Box>

                {/* 会社コード / 登録日時 */}
                {renderTwoColumnRow('会社コード', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="会社コードを入力"
                        value={companyCode}
                        onChange={(e) => setCompanyCode(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '登録日時', (
                    <TextField
                        size="small"
                        fullWidth
                        value={registrationDate}
                        sx={{
                            bgcolor: 'action.hover',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 会社名 / かな */}
                {renderTwoColumnRow('会社名', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="会社名を入力"
                        value={companyName}
                        onChange={(e) => setCompanyName(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'かな', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="かなを入力"
                        value={companyNameKana}
                        onChange={(e) => setCompanyNameKana(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 正式名称 / 設立年 */}
                {renderTwoColumnRow('正式名称', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="正式名称を入力"
                        value={officialName}
                        onChange={(e) => setOfficialName(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '設立年', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="設立年を入力"
                        value={establishedYear}
                        onChange={(e) => setEstablishedYear(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 資本金 / 従業員数 */}
                {renderTwoColumnRow('資本金', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="資本金を入力"
                        value={capital}
                        onChange={(e) => setCapital(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '従業員数', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="従業員数を入力"
                        value={employeeCount}
                        onChange={(e) => setEmployeeCount(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 売上高 */}
                {renderFormRow('売上高', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="売上高を入力"
                        value={revenue}
                        onChange={(e) => setRevenue(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* カテゴリー */}
                {renderFormRow('カテゴリー', (
                    <FormControl size="small" style={{ width: '50%' }}>
                        <Select
                            value={category}
                            onChange={(e) => setCategory(e.target.value)}
                            displayEmpty
                            sx={{
                                '& .MuiOutlinedInput-root': {
                                    height: 32,
                                    fontSize: '0.875rem'
                                }
                            }}
                        >
                            <MenuItem value="">-----</MenuItem>
                            <MenuItem value="IT・情報通信">IT・情報通信</MenuItem>
                            <MenuItem value="製造業">製造業</MenuItem>
                            <MenuItem value="建設業">建設業</MenuItem>
                            <MenuItem value="小売業">小売業</MenuItem>
                            <MenuItem value="サービス業">サービス業</MenuItem>
                        </Select>
                    </FormControl>
                ))}

                {/* 代表電話 / 郵便番号 */}
                {renderTwoColumnRow('代表電話', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="代表電話を入力"
                        value={mainPhone}
                        onChange={(e) => setMainPhone(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '郵便番号', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="例: 012-3456"
                        value={postalCode}
                        onChange={(e) => setPostalCode(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 連絡先住所 / 代表者 */}
                {renderTwoColumnRow('連絡先住所', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="住所を入力"
                        value={address}
                        onChange={(e) => setAddress(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '代表者', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="代表者名を入力"
                        value={representative}
                        onChange={(e) => setRepresentative(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 平均年齢 / 株式公開 */}
                {renderTwoColumnRow('平均年齢', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="平均年齢を入力"
                        value={averageAge}
                        onChange={(e) => setAverageAge(e.target.value)}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>才</Typography>
                                </InputAdornment>
                            ),
                        }}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), '株式公開', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="株式公開情報を入力"
                        value={stockListed}
                        onChange={(e) => setStockListed(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 外資比率 / URL */}
                {renderTwoColumnRow('外資比率', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="外資比率を入力"
                        value={foreignOwnership}
                        onChange={(e) => setForeignOwnership(e.target.value)}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>%</Typography>
                                </InputAdornment>
                            ),
                        }}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'URL', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="URLを入力"
                        value={url}
                        onChange={(e) => setUrl(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}

                {/* 担当 */}
                {renderFormRow('担当', (
                    <Stack direction="row" spacing={2} sx={{ width: '100%' }}>
                        <Box sx={{ flex: 1 }}>
                            <FormControl size="small" fullWidth>
                                <Select
                                    value={assignedDepartment}
                                    onChange={(e) => setAssignedDepartment(e.target.value)}
                                    displayEmpty
                                    sx={{
                                        '& .MuiOutlinedInput-root': {
                                            height: 32,
                                            fontSize: '0.875rem'
                                        }
                                    }}
                                >
                                    <MenuItem value="">全体</MenuItem>
                                    <MenuItem value="営業部">営業部</MenuItem>
                                    <MenuItem value="技術部">技術部</MenuItem>
                                    <MenuItem value="管理部">管理部</MenuItem>
                                </Select>
                            </FormControl>
                        </Box>
                        <Box sx={{ flex: 1 }}>
                            <FormControl size="small" fullWidth>
                                <Select
                                    value={assignedPerson}
                                    onChange={(e) => setAssignedPerson(e.target.value)}
                                    displayEmpty
                                    sx={{
                                        '& .MuiOutlinedInput-root': {
                                            height: 32,
                                            fontSize: '0.875rem'
                                        }
                                    }}
                                >
                                    <MenuItem value="">-----</MenuItem>
                                    <MenuItem value="担当者A">担当者A</MenuItem>
                                    <MenuItem value="担当者B">担当者B</MenuItem>
                                </Select>
                            </FormControl>
                        </Box>
                    </Stack>
                ), 'center')}

                {/* メモ / ステータス */}
                {renderTwoColumnRow('メモ', (
                    <TextField
                        size="small"
                        fullWidth
                        rows={2}
                        placeholder="メモを入力"
                        value={memo}
                        onChange={(e) => setMemo(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'ステータス', (
                    <FormControl size="small" fullWidth>
                        <Select
                            value={status}
                            onChange={(e) => setStatus(e.target.value)}
                            sx={{
                                '& .MuiOutlinedInput-root': {
                                    height: 32,
                                    fontSize: '0.875rem'
                                }
                            }}
                        >
                            <MenuItem value="アクティブ">アクティブ</MenuItem>
                            <MenuItem value="ペンディング">ペンディング</MenuItem>
                            <MenuItem value="デッド">デッド</MenuItem>
                        </Select>
                    </FormControl>
                ), 'center')}
            </Box>

            {/* 詳細セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        詳細
                    </Typography>
                </Box>

                {/* 事業概要 */}
                {renderFormRow('事業概要', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="事業概要を入力"
                        value={businessOverview}
                        onChange={(e) => setBusinessOverview(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 組織構成 */}
                {renderFormRow('組織構成', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="組織構成を入力"
                        value={organizationStructure}
                        onChange={(e) => setOrganizationStructure(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 選考プロセス */}
                {renderFormRow('選考プロセス', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="選考プロセスを入力"
                        value={selectionProcess}
                        onChange={(e) => setSelectionProcess(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 過去の採用状況 */}
                {renderFormRow('過去の採用状況', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="過去の採用状況を入力"
                        value={pastAdoptionStatus}
                        onChange={(e) => setPastAdoptionStatus(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 面接担当者の嗜好 */}
                {renderFormRow('面接担当者の嗜好', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="面接担当者の嗜好を入力"
                        value={interviewPreference}
                        onChange={(e) => setInterviewPreference(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 会社の売り */}
                {renderFormRow('会社の売り', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="会社の売りを入力"
                        value={companySales}
                        onChange={(e) => setCompanySales(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 今後の展開・将来性 */}
                {renderFormRow('今後の展開・将来性', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="今後の展開・将来性を入力"
                        value={futureDevelopment}
                        onChange={(e) => setFutureDevelopment(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 競合 */}
                {renderFormRow('競合', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="競合情報を入力"
                        value={merger}
                        onChange={(e) => setMerger(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 契約条件 */}
                {renderFormRow('契約条件', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="契約条件を入力"
                        value={contractConditions}
                        onChange={(e) => setContractConditions(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 職場の環境 */}
                {renderFormRow('職場の環境', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="職場の環境を入力"
                        value={workplaceEnvironment}
                        onChange={(e) => setWorkplaceEnvironment(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 株主 */}
                {renderFormRow('株主', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="株主情報を入力"
                        value={shareholders}
                        onChange={(e) => setShareholders(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 関連会社 */}
                {renderFormRow('関連会社', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="関連会社を入力"
                        value={relatedCompanies}
                        onChange={(e) => setRelatedCompanies(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 本社以外事業所 */}
                {renderFormRow('本社以外事業所', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="本社以外事業所を入力"
                        value={otherBusinessLocations}
                        onChange={(e) => setOtherBusinessLocations(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 取引銀行 */}
                {renderFormRow('取引銀行', (
                    <TextField
                        size="small"
                        fullWidth
                        multiline
                        rows={3}
                        placeholder="取引銀行を入力"
                        value={transactionBank}
                        onChange={(e) => setTransactionBank(e.target.value)}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ), 'flex-start')}

                {/* 料率 */}
                {renderFormRow('料率', (
                    <TextField
                        size="small"
                        fullWidth
                        placeholder="料率を入力"
                        value={materialRate}
                        onChange={(e) => setMaterialRate(e.target.value)}
                        InputProps={{
                            endAdornment: (
                                <InputAdornment position="end">
                                    <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>% (半角数字)</Typography>
                                </InputAdornment>
                            ),
                        }}
                        sx={{
                            bgcolor: 'background.paper',
                            '& .MuiOutlinedInput-root': {
                                height: 32,
                                fontSize: '0.875rem'
                            }
                        }}
                    />
                ))}
            </Box>

            {/* 自由項目セクション */}
            <Box
                sx={{
                    bgcolor: 'background.paper',
                    border: '1px solid',
                    borderColor: 'divider',
                    borderRadius: 0.5,
                    overflow: 'hidden',
                    mb: 3,
                }}
            >
                <Box sx={{ bgcolor: 'rgba(5,67,165,0.1)', px: 1.5, py: 0.75, borderBottom: '1px solid', borderColor: 'divider' }}>
                    <Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'text.primary', fontSize: '0.875rem' }}>
                        自由項目
                    </Typography>
                </Box>

                <Box sx={{ p: 2 }}>
                    <Stack spacing={2}>
                        <Typography variant="body2" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
                            カスタムフィールドを追加して、独自の項目を設定できます。
                        </Typography>
                        <Button
                            variant="outlined"
                            size="small"
                            startIcon={<Iconify icon="solar:pen-bold" />}
                            onClick={() => setCustomFields([...customFields, { key: '', value: '' }])}
                            sx={{ alignSelf: 'flex-start' }}
                        >
                            項目を追加
                        </Button>
                        {customFields.length > 0 && (
                            <Stack spacing={1.5}>
                                {customFields.map((field, index) => (
                                    <Stack direction="row" spacing={2} alignItems="center" key={index}>
                                        <TextField
                                            size="small"
                                            placeholder="項目名"
                                            value={field.key}
                                            onChange={(e) => {
                                                const newFields = [...customFields];
                                                newFields[index].key = e.target.value;
                                                setCustomFields(newFields);
                                            }}
                                            sx={{
                                                flex: 1,
                                                '& .MuiOutlinedInput-root': {
                                                    height: 32,
                                                    fontSize: '0.875rem'
                                                }
                                            }}
                                        />
                                        <TextField
                                            size="small"
                                            placeholder="値"
                                            value={field.value}
                                            onChange={(e) => {
                                                const newFields = [...customFields];
                                                newFields[index].value = e.target.value;
                                                setCustomFields(newFields);
                                            }}
                                            sx={{
                                                flex: 2,
                                                '& .MuiOutlinedInput-root': {
                                                    height: 32,
                                                    fontSize: '0.875rem'
                                                }
                                            }}
                                        />
                                        <IconButton
                                            color="error"
                                            size="small"
                                            onClick={() => {
                                                const newFields = customFields.filter((_, i) => i !== index);
                                                setCustomFields(newFields);
                                            }}
                                        >
                                            <Iconify icon="solar:trash-bin-trash-bold" />
                                        </IconButton>
                                    </Stack>
                                ))}
                            </Stack>
                        )}
                    </Stack>
                </Box>
            </Box>

            {/* 最終登録ボタン */}
            <Box
                sx={{
                    display: 'flex',
                    gap: 2,
                    justifyContent: 'center',
                    p: 3,
                    bgcolor: 'background.neutral',
                    borderRadius: 2,
                    border: '1px solid',
                    borderColor: 'divider',
                }}
            >
                <Button
                    variant="outlined"
                    color="inherit"
                    size="large"
                    onClick={handleReset}
                    startIcon={<Iconify icon="solar:restart-bold" />}
                    sx={{
                        minWidth: 180,
                        height: 48,
                        fontWeight: 600,
                    }}
                >
                    リセット
                </Button>
                <Button
                    variant="contained"
                    color="primary"
                    size="large"
                    onClick={handleSubmit}
                    startIcon={<Iconify icon="solar:check-circle-bold" />}
                    sx={{
                        minWidth: 180,
                        height: 48,
                        fontWeight: 600,
                        boxShadow: (theme) => `0 8px 16px ${theme.palette.primary.main}40`,
                        '&:hover': {
                            boxShadow: (theme) => `0 12px 20px ${theme.palette.primary.main}50`,
                        },
                    }}
                >
                    登録
                </Button>
            </Box>
        </DashboardContent>
    );
};

export default CompanyAddPage;
